<template>
  <div style="margin: 200px auto">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-table :data="tableData" border style="width: 100%;border-radius: 3px">
      <el-table-column prop="id" align="center" label="id" width="80"></el-table-column>
      <el-table-column prop="userid" header-align="center" label="用户id" width="80"></el-table-column>
      <el-table-column prop="productid" header-align="center" label="商品id"width="200"></el-table-column>
      <el-table-column prop="productname" header-align="center" label="商品名称" width="200"></el-table-column>
      <el-table-column header-align="center" label="商品图片" width="200">
        <template slot-scope="scope">
          <!--scope.row得到当前行对应的数组里面的对象-->
          <img :src="scope.row.picture" width="100px" height="100px">
        </template>
      </el-table-column>
      <el-table-column prop="buynum" header-align="center" label="购买数量" width="80"></el-table-column>
      <el-table-column prop="price" header-align="center" label="价格" width="80"></el-table-column>
      <el-table-column prop="type" header-align="center" label="支付类型" width="80">{{type}}</el-table-column>
      <el-table-column prop="status" header-align="center" label="状态" width="80">{{enable}}</el-table-column>
      <el-table-column prop="consignee" header-align="center" label="姓名" width="80"></el-table-column>
      <el-table-column prop="phone" header-align="center" label="手机号" width="80"></el-table-column>
      <el-table-column prop="address" header-align="center" label="地址" width="80"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id:"",
      userid:"",
      tableData: [],
      type:"测试",
      enable:"已支付"
    }
  },
  methods:{
    islogin(){
      let jwt = localStorage.getItem('jwt');
      console.log(jwt);
      if (!jwt) {
        this.$message.error('您还未登录，请先登录');
        this.$router.push('/login');
      }
    },
    getId(){

    },
    opebDeleteConfirm(orders){
      let title = '提示'
      let message = '此操作将永久删除 '+orders.id+ ' 相册,是否继续?';
      this.$confirm(message,title,{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(() => {
        this.handleDelete(orders);
      }).catch(() => {

      });
    },
    handleEdit(orders) {
      // alert('你点击了【' + album.name + ' (id=' + album.id + ')】的【编辑】按钮');

    },
    handleDelete(orders) {
      // alert('你点击了【' + album.name + ' (id=' + album.id + ')】的【删除】按钮');
      console.log('handleDelete..  id=' + orders.id)
      let url = "http://localhost:8090/orders/delete/"+orders.userid;
      console.log("url="+url);
      this.axios.post(url).then((response) =>{
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state == 20000){
          console.log('删除成功');
          this.loadAldumList();
        }else {
          this.$message.error(responseBody.message);
        }
        this.loadAldumList();
      })
    },
    loadAldumList(){
      let jwt = localStorage.getItem('jwt');
      console.log(jwt);
      const decode = this.jwt_decode(jwt);
      console.log(decode.id);
      this.id=decode.id;
      let url = "http://localhost:8090/orders/"+decode.id;
      console.log("url="+url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) =>{
        let responseBody = response.data;
        console.log("订单")
        console.log(responseBody);
        this.tableData = responseBody.data;
      });
    }
  },
  mounted() {
    console.log("mounted..")

    this.loadAldumList();

  },
  created() {
    console.log('created..')
    this.islogin();
  }
}
</script>

<style scoped>

</style>